import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import * as echarts from 'echarts';
import Navbar from '@/components/compoents-nav/navigationBar.vue';
import { useThemeStore } from '@/stores/theme-store';

export default {
  name: 'home',
  components: {
    Navbar
  },
  setup() {
    const router = useRouter()
    const chart = ref(null)
    const welcome = ref("欢迎")
    const themeStore = useThemeStore();

    // 修复：将 toPage 函数移到 setup 内部
    const toPage = () => {
      // 可以选择使用 router 或 window.open
      router.push('/')
      // 或使用 window.open(`${window.location.origin}/`, '_blank');
    }
    //侧边弹窗



    //样式切换
    const css = ref(true); // 假设这是你的状态变量
    // let chartColor = "white";
    let myChart;
    let option;
    function cssChange() {
      css.value = !css.value;
      console.log(css.value);
      homeStyle.value.href = css.value
        ? "/src/views/subjects/english/pages/home/home1.css"
        : "/src/views/subjects/english/pages/home/home0.css";
      updateChart(themeStore.isDarkTheme() ? '#fff' : ' #2f2d2d');
    }

    watch(() => themeStore.theme, () => {
      updateChart(themeStore.isLightTheme() ? '#fff' : ' #2f2d2d');
    })

    const homeStyle = ref(null)
    const imagePath = computed(() => {
      // 使用 @ 别名（需要在项目配置中定义）
      return '/src/assets/images/english-home-img/设置' + (themeStore.isLightTheme() ? 1 : 0) + '_setting-two.png';
    });
    const telegramImagePath = computed(() => {
      return themeStore.isLightTheme()
        ? "/src/assets/images/english-home-img/Telegram1_telegram .png"
        : "/src/assets/images/english-home-img/Telegram0_telegram.png";
    });






    //图表样式
    function updateChartOption(chartColor) {

      option = {
        title: {
          text: '每日英语学习时长',
          left: 'center',
          textStyle: {
            color: chartColor // 标题文字白色
          }
        },
        xAxis: {
          type: 'category',//类目轴
          nameLocation: 'middle',//刻度标签与轴线之间的距离
          nameGap: 25,//刻度标签与轴线之间的距离
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick: { show: false },
          axisLabel: {
            margin: 20, //字体边距
            rotate: 45,
            color: chartColor,// 横坐标文字白色
            fontWeight: 500, // 刻度文字加粗
            fontSize: 14 // 可选：调整刻度文字大小
          },
          axisLine: { // 横坐标线白色
            lineStyle: {
              color: chartColor,
              width: 3
            }
          }
        },
        yAxis: {
          type: 'value',
          nameLocation: 'middle',
          nameGap: 20,
          nameTextStyle: { color: chartColor },
          splitLine: {
            show: false
          },

          axisLabel: {
            margin: 10,
            fontWeight: 500, // 刻度文字加粗
            fontSize: 14, // 可选：调整刻度文字大小
            color: chartColor, // 纵坐标文字白色
            formatter: (value) => `${value}h`// 格式化为小时
          },
          axisLine: { // 纵坐标线白色
            lineStyle: {
              color: chartColor,
              width: 3
            },
            show: true,
          },

          min: 0,
          max: 8, // 限制最大为8小时
          interval: 2 // 间隔为2小时
        },

        series: [
          {
            name: '学习时长',
            data: [2, 3, 2.5, 8, 2.5, 3.2, 4.5], // 使用小时为单位的数据
            type: 'line',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}h' // 显示小时单位
            },
            itemStyle: { color: '#f07d4fff' },
            lineStyle: { width: 3, color: 'orange' },
            symbol: 'circle',
            symbolSize: 8,
            emphasis: { symbolSize: 12 }
          }
        ]

      };
    };

    //销毁图表并创建新的图表
    function updateChart(chartColor) {
      updateChartOption(chartColor);//改变颜色
      myChart?.dispose();//销毁图表
      myChart = echarts.init(chart.value);//创建图表
      myChart.setOption(option);//设置图表
    }
    //折线图
    onMounted(() => {
      updateChart('#ffffff');
      // if (chart.value) {
      //   myChart = echarts.init(chart.value);
      //   myChart.setOption(
      //     option
      //   )
      // }
    });



    // 返回需要暴露的变量和函数
    return {
      chart,
      welcome,
      toPage,
      css,
      cssChange,
      imagePath,
      homeStyle,
      telegramImagePath,
      Navbar,
      themeStore

    }
  }
}